/***********************************************************
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License
 **********************************************************/
 @import 'variables';
 @import 'themes';

 @media screen and (max-width: $screenSize) {
    .maskedCopyableTextField {
        max-width: 92vw;
    }
 }

.maskedCopyableTextField {
    margin-bottom: 5px;
    .labelSection {
        text-overflow: ellipsis;
    }
    .copySection {
        margin-right: 5px;
    }
    .controlSection {
        display: flex;
    }
    .borderedSection {
        display: flex;
        flex-grow: 1;
        border-width: 1px;
        border-style: solid;
        @include themify($themes) {
            border-color: themed('maskedCopyableColor');
            color: themed('maskedCopyableColor');
            background-color: themed('maskedCopyableBackground');
        }
        margin-right: 5px;

        & > input {
            @include themify($themes) {
                color: themed('maskedCopyableColor');
            }
            border: none;
            &:hover {
                border: none;
            }
            &:focus {
                border:none;
            };
            padding-left: 12px;
            padding-right: 12px;
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: $textSize;
            width: 100%;
            text-overflow: ellipsis;
            background-color: transparent;
        }
    }

    .readOnly {
        @include themify($themes) {
            background-color: themed('maskedCopyableReadonlyBackground');
        }
    }

    .error {
        @include themify($themes) {
            border-color: themed('errorBorder');
        }
    }

    .errorSection {
        @include themify($themes) {
            color: themed('errorText');
        }
        font-size: $textSize;
    }
}
